<template>
  <div>
    <el-row class="demo-autocomplete">
      <el-select v-model="select.classname" filterable placeholder="学科名称" style="box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)">
          <el-option v-for="(item,index) in select.classAll" :key="index" :value="item.subName" :label="item.subName"></el-option>
      </el-select>
      <el-button type="primary" @click="searchTable">查找</el-button>
      <el-button type="danger" @click="resetTable">重置</el-button>
      <el-button type="danger" class="addclass" @click="addClass">+添加学科</el-button>
    </el-row>
   <el-table  :data="tableData" max-height="520px" style="width: 100%;height:80%">
    <el-table-column
      type="index"
      width="150">
    </el-table-column>
    <el-table-column
      prop="sid"
      label="学科编号"
      width="350"
      >
    </el-table-column>
    <el-table-column
      prop="subName"
      label="学科名称"
      width="350"
      >
    </el-table-column>
    <el-table-column label="操作" width="400">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="primary"
          @click="handleEdit(scope.$index, scope.row)">管理</el-button>
        <el-button
          size="mini"
          type="success"
          @click="handleView(scope.$index, scope.row)">邀请</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination background layout="prev, pager, next"  @current-change="handleCurrentChange" :page-size="pagination.pageSize" :total="pagination.total"></el-pagination>

  <el-dialog title="添加学科" :visible.sync="dialogFormVisible">
  <el-form :model="form">
    <el-form-item label="学科名称">
      <el-input v-model="form.subName" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmedit">确 定</el-button>
  </div>
</el-dialog>

  </div>
</template>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
    .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-select {
    margin: 10px;
  }
  .el-pagination {
    margin-left: 50%;
    margin-top: 10px;
    transform: translate(-50%);
  }
  .addclass{
    float: right;
    margin-top: 10px;
    margin-right: 10px;
  }
</style>

<script>
import axios from 'axios'
  export default {
    data() {
      return {
        dialogFormVisible:false,
        select:{//用来存储下拉框相关数据
          classAll:[],//获取所有班级信息
          classname:'',
        },
        form:{
          subName:'',
        },
        SubjectAll:[],//获取所有学科
        table:{

        },//存储表格的相关数据
        pagination:{//用来存储分页的相关数据
          total:88,//总数量
          pageSize:8,//每一页的数量
        },
        tableData:[],//用来展示每一次数据
        tableDataShow:[],//用来保存所有数据
        tableDataAll: []
      }
    },
    mounted() {
      axios.get(`http://42.193.219.14:8080/getSubjectByUid`,{
        headers: {"Authorization": "Bearer "+ sessionStorage.getItem('token')}
      }).then(
      response => {
        console.log('学科请求成功了', response.data.data);
        this.tableDataAll=this.select.classAll=response.data.data||[];
        this.tableData=this.tableDataAll.slice(0,8);//挂载完毕表格渲染
      },
      error => {
        console.log('请求失败', error.message);
      },)
    },
    methods: {
      tableRowClassName({rowIndex}) {
        if (rowIndex %2=== 1) {
          return 'warning-row';
        } else{
          return 'success-row';
        }
      },

      addClass(){
        this.dialogFormVisible = true;
      },

      confirmedit(){
        axios({
        method: "post",
        url: "http://127.0.0.1:8080/addSubject",
        headers: {
          "Authorization": "Bearer "+ sessionStorage.getItem('token'),
          "Content-Type": "application/json"
        },
        withCredentials: true,
        data: JSON.stringify(this.form)
      }).then((response) => {
        console.log(response);
      });
      this.dialogFormVisible=false;
        this.form.subName='';
      },

      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },

      handleCurrentChange(val){//页面切换，默认参数1为页码
        this.tableData=this.tableDataAll.slice((val-1)*8,val*8)
      },

      searchTable(){
        if(this.select.classname!=''){
            console.log('搜索'+this.select.classname);
            this.tableData=this.filterArr(this.tableDataAll);
        }
        else {
            this.$message({
            type: 'warning',
            message: '班级名称不为空'
          });
        }
      },

      resetTable(){
        this.tableData=this.tableDataAll;//重新跟新
      },

      formatter(row) {
        return row.classname;
      },

       handleEdit(index, row) {
        console.log(index, row);
      },

      handleDelete(index, row) {
        console.log(row);
        this.$confirm('将永久删除此班级, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.tableData=this.filterArr2(this.tableData,row)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },


      filterArr(datas,rowindex){//搜索框===数组的过滤
        return  datas.filter((data,index)=>{
          return (data.cname==this.select.classname);
          })
      },
      //目前都是假数据，没必要这么复杂，每套试卷都有唯一id
      filterArr2(datas,row){//删除===数组的过滤
        return  datas.filter((data,index)=>{
          return (data.classname!=row.classname||data.tag!=row.tag||data.name!=row.name||data.data!=row.data);
          })
      },
    }
  }
</script>
